<div id="user_manage">
    <div class="user_manage">
        <el-row class="table_search">
            <el-col :span="24">
                <template>
                    <el-input
                            id="userSearch"
                            style="font-size: 12px"
                            placeholder="请输入用户名进行搜索"
                            v-model.trim="parameters.inputVar"
                            clearable
                            prefix-icon="el-icon-search">
                    </el-input>
                    <el-select v-model="parameters.corpId" clearable filterable placeholder="请选择商户" style="width:230px;">
                        <el-option
                                label="请选择商户"
                                value="">
                        </el-option>
                        <el-option
                                v-for="item in merchantList"
                                :key="item.corpId"
                                :label="item.corpName"
                                :value="item.corpId">
                        </el-option>
                    </el-select>
                    <el-button type="primary" @click="searchFun" icon="el-icon-search" style="margin-left: 20px">搜索</el-button>
                </template>
                <el-button class="add-manager" type="primary" @click="addUser" icon="el-icon-plus">新增管理员</el-button>
            </el-col>
        </el-row>

        <!--<el-row class="table_btn">-->
        <!--<el-col :span="24" class="text-r">-->
        <!--<el-button type="primary" @click="addUser" icon="el-icon-plus">新增管理员</el-button>-->
        <!--</el-col>-->
        <!--</el-row>-->
        <template>
            <el-table
                    size="mini"
                    @row-click="goUserDetails"
                    @cell-mouse-enter="userMouseEnterEvent"
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        align="center"
                        prop="usercode"
                        label="用户账号"
                        width="190">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="nickname"
                        label="用户名"
                        width="190">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="190"
                        prop="corpName"
                        label="所属商户">
                </el-table-column>
                <el-table-column
                        align="center"
                        width="190"
                        prop="status"
                        label="用户状态">
                    <template slot-scope="scope">
                        <div class="switchBox" id="switchBox">
                            <label class="switchBtn" @click="selSwitchBox($event,scope.row.status)" >
                                <span class="switchWords">禁用</span>
                                <i class="switchCircleActive" v-if="scope.row.status == '02' || scope.row.status == true">
                                    <span class="switchCircleInfoActive"></span>
                                </i>
                                <i class="switchCircle" v-else>
                                    <span class="switchCircleInfo"></span>
                                </i>
                                <span class="switchWords" >可用</span>
                                <input type="checkbox" class="switchInput" v-model="scope.row.status" @change="changeType(scope.$index, scope.row)">
                            </label>
                        </div>
                        <!--<el-switch-->
                                <!--v-model="scope.row.status"-->
                                <!--@change="changeType(scope.$index, scope.row)"-->
                                <!--active-text="可用"-->
                                <!--active-value="02"-->
                                <!--inactive-value="03"-->
                                <!--inactive-text="禁用"-->
                                <!--active-color="#13ce66"-->
                                <!--inactive-color="#ff4949">-->
                        <!--</el-switch>-->
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template slot-scope="scope">
                        <el-button type="danger"  size="mini" @click="resetMima(scope.$index, scope.row)">重置密码</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="block footerBox" id="fenyeBox">
                <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        layout="prev, pager, next"
                        :current-page.sync="currentPage"
                        :total="totalCount">
                </el-pagination>
            </div>
        </template>

    </div>
    <!--新增弹出框-->
    <div class="isShowingBox" v-show="isShowingBox"></div>{{isOverflow}}
    <el-dialog title="新增商户管理员" :close-on-press-escape="isEsc" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogAddFormVisible" class="edit_dialog" ModelAttribute="SysUser">
        <span class="delDialogBtn" @click="closeAddDialog">x</span>
        <el-form
                class="edit-template-form"
                ref="addForm"
                :model="addForm"
                label-width="140px"
                :label-position="labelPosition">
            <el-form-item label="所属商户" prop="corpId" >
                <!--<el-input type="" v-model="form.cityId"></el-input>-->
                <el-select v-model="addForm.corpId" filterable placeholder="请选择" style="width: 60%;">
                    <el-option
                            v-for="item in merchantList"
                            :key="item.corpId"
                            :label="item.corpName"
                            :value="item.corpId">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="请输入用户姓名：" prop="name">
                <el-input v-model="addForm.add_nick_name" style="width: 60%;"></el-input>
            </el-form-item>

            <el-form-item label="请输入手机号码：" prop="name" class="phoneNumBox">
                <el-input v-model="addForm.add_user_phone" style="width: 60%;"></el-input>
            </el-form-item>

            <el-form-item label="请输入邮箱：" prop="name" class="emailBox">
                <el-input v-model="addForm.add_user_emain" style="width: 60%;"></el-input>
            </el-form-item>
            <!--按钮模板-->
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="clearlNotice('addForm')">取 消</el-button>
            <el-button type="primary" @click="sendAddData">确 定</el-button>
        </div>
    </el-dialog>

    <!--详情页单出框-->
    <el-dialog title="用户详情" :close-on-press-escape="isEsc" :close-on-click-modal="ismodalClose" :show-close="showDelBtn" :visible.sync="dialogDetailsFormVisible" class="dialogDetails">
        <span class="delDialogBtn" @click="dialogDetailsFormVisible = false;isShowingBox = false">x</span>
        <div class="info-template-content">
            <el-row class="item-row">
                <el-col :span="4" style="color: #666;text-align: right">用户账号：</el-col>
                <el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.usercode}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="4" style="color: #666;text-align: right">用户姓名：</el-col>
                <el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.nickname}}</el-col>
            </el-row>
            <!--
                        <el-row class="item-row">
                            <el-col :span="4" style="color: #666;text-align: right">用户角色：</el-col>
                            <el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.roleName}}</el-col>
                        </el-row>-->
            <el-row class="item-row" >
                <el-col :span="4" style="color: #666;text-align: right">手机号码：</el-col>
                <el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.phone}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="4" style="color: #666;text-align: right">邮箱：</el-col>
                <el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.email}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="4" style="color: #666;text-align: right">状态：</el-col>
                <el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.status}}</el-col>
            </el-row>
            <el-row class="item-row">
                <el-col :span="4" style="color: #666;text-align: right">所属单位：</el-col>
                <el-col :span="18" style="color: #333;padding-left: 15px">{{detailsForm.corpName}}</el-col>
            </el-row>

        </div>
    </el-dialog>
</div>
</body>
</html>

<script>
    $(function () {
        placeHolde("#userSearch","请输入用户名进行搜索");
    });

    var layer,
        loadRole;
    layui.use('layer', function(){
        layer = layui.layer;
        loadRole  = layer.load(1, {shade: [0.5, '#000']});

    });
    //新增弹出框树状结构addSetting   addCitySel  addCitySel  addMenuContent
    var addSetting = {
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { "Y": "ps", "N": "ps" }
        },
        data: {
            simpleData: {
                enable: true,
                rootPId: 0
            }
        },
        callback: {
            beforeClick: addBeforeClick,
            onCheck: addOnCheck
        }
    };
    var zNodes1 = [];
    function addBeforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("addTreeDemo123");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    var totalNodes;
    function addOnCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("addTreeDemo123"),
            nodes1 = zTree.getCheckedNodes(true),
            selAll = [],
            v = "";
        for (var i=0, l=nodes1.length; i<l; i++) {
            v += nodes1[i].name + ",";
            if(!nodes1[i].isParent){
                selAll.push(nodes1[i].id)
            }
        }
        if (v.length > 0 ) v = v.substring(0, v.length-1);
        var cityObj1 = $("#addCitySel");
        cityObj1.attr("value", v);
        totalNodes = selAll;

    }

    function addHideMenu() {
        $("#addMenuContent").fadeOut("fast");
        $("body").unbind("mousedown", addOnBodyDown);
    }
    function addOnBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "addCitySel" || event.target.id == "addMenuContent" || $(event.target).parents("#addMenuContent").length>0)) {
            addHideMenu();
        }
    }
    //新增弹出框树结构结束
    //编辑弹出框树结构开始
    var setting = {
        check: {
            enable: true,
            chkStyle: "checkbox",
            chkboxType: { "Y": "p", "N": "s" }
        },
        data: {
            simpleData: {
                enable: true,
                rootPId: 0
            }
        },
        callback: {
            beforeClick: beforeClick,
            onCheck: onCheck
        }
    };
    var zNodes = [];
    function beforeClick(treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo123");
        zTree.checkNode(treeNode, !treeNode.checked, null, true);
        return false;
    }
    var totalNodes2;
    function onCheck(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("treeDemo123"),
            nodes = zTree.getCheckedNodes(true),
            selAll1=[],
            v = "";
        for (var i=0, l=nodes.length; i<l; i++) {
            v += nodes[i].name + ",";
            if(!nodes[i].isParent){
                selAll1.push(nodes[i].id)
            }
        }
        if (v.length > 0 ) v = v.substring(0, v.length-1);
        var cityObj = $("#citySel");
        cityObj.attr("value", v);
        totalNodes2 = selAll1;
    }

    function showMenu() {
        var cityObj = $("#citySel");
        var cityOffset = $("#citySel").offset();
        $("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");

        $.post("${basePath}merchant/dept/togetDeptTree", function (json) {
            var treeObj = $.fn.zTree.init($("#treeDemo123"), setting, json.t);
            //默认展开所有节点
            //treeObj.expandAll(true);
        });
        //$.fn.zTree.init($("#treeDemo123"), setting, zNodes);
        $("body").bind("mousedown", onBodyDown);
    }
    function hideMenu() {
        $("#menuContent").fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == "menuBtn" || event.target.id == "citySel" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {
            hideMenu();
        }
    }
    //编辑弹出框  树结构结束
    var user_manage =
        new Vue({
            el: "#user_manage",
            data: {
                isShowingBox:false,
                showDelBtn:false,

                ismodalClose:false,
                isEsc:false,



                // inputVar: '',
                merchantList:'',
                tableData:[],
                roleData:[],
                currentPage: 1,
                pageSize:10,
                labelPosition:'left',
                dialogAddFormVisible: false,
                corpId:'',
                addForm: {                          //增加用户数据
                    corpId:'',
                    add_nick_name:'',
//						add_user_name:'',
                    add_user_phone:'',
                    add_user_emain:'',
                },
                formLabelWidth: 'auto',
                dialogEditFormVisible: false,
                dialogDetailsFormVisible: false,
                detailsForm: {
                    corpName:'',
                    usercode:'',
                    nickname:'',
                    phone: '',
                    roleName: '',
                    status: '',
                    email: ''
                },
                formLabelWidth: '120px',
                totalCount:'',
                totalPage:'',
                parameters:{
                    orgIds:'',
                    corpId:'',//过滤条件
                    corpIds:'',//总过滤条件
                    status:'',
                    currentPage:'',
                    inputVar: '',
                    search:'1',
                    system:'02',
                    type:'01'
                },
                currentPage: 1,
                pageSize:10
            },
            methods: {
                clearlNotice:function(f) {
                    this.backHome();
                    this.$refs[f].clearValidate();
                },
                backHome:function () {
                    this.closeAddDialog();
                    this.isShowingBox = false;
                    this.dialogEditFormVisible = false;
                    this.dialogAddFormVisible = false;
                    this.dialogDetailsFormVisible = false;
                },
                /**
                 * 点击X关闭模态框
                 * */
                closeAddDialog:function () {
                    var form = this.$refs.addForm;
                    form.clearValidate();
                    this.isShowingBox = false;
                    this.dialogEditFormVisible = false;
                    this.dialogAddFormVisible = false;
                    this.dialogDetailsFormVisible = false;
                },
                selSwitchBox:function (e,s) {
//                    var statusNow ;
//                    if(s == "02"){
//                        statusNow = true;
//                    }else if(s == "03"){
//                        statusNow = false;
//                    }
                       if(s == true || s == '02'){
                           $(e.currentTarget).find("i").attr("class","switchCircle");
                           $(e.currentTarget).find("i").children().attr("class","switchCircleInfo");
                       }
                       if(s == false || s == '03'){
                           $(e.currentTarget).find("i").attr("class","switchCircleActive");
                           $(e.currentTarget).find("i").children().attr("class","switchCircleInfoActive");
                       }
                },
                changeType:function(index, row){
                    var rowStatus;
                        if(row.status == true){
                            rowStatus = "02";
                        }else{
                            rowStatus = "03";
                        }

                    var url = "${basePath}bank/user/changeType";
                    var options = {
                        'usercode': row.usercode,
                        'status': rowStatus
                    };
                    sendService(url, options, function (resData) {
                        if (resData.status == 'success') {
                            layer.msg('操作成功', {icon: 6});
                        } else {
                            layer.msg("操作失败！请联系管理员！", {icon: 5});
                        }
                    });
                    return true;
                },
                /**
                 * 增加用户  发送数据给后台
                 */
                sendAddData:function () {
                    var that = this;
                    this.dialogAddFormVisible = false;
                    this.isShowingBox = false;
                    var arr1 = new Array();
                    if(totalNodes){
                        var arr1Str = totalNodes.join(',');
                    }
                    var option6= {
                        corpId:this.addForm.corpId,
                        nickname:this.addForm.add_nick_name,
                        email:this.addForm.add_user_emain,
                        phone:this.addForm.add_user_phone
                    };
                    sendService('${basePath}bank/merchant/saveMercantManager', option6, function (resData) {
                        if(resData.status == 'success'){
                            layer.msg('新增成功!', {icon: 6});
                            reloadPage('${basePath}bank/merchantManager');
                        }
                    })

                },
                goPage: function (url) {
                    window.location.href= '${basePath}'+url;
                },
                handleSizeChange: function (size) {
                    this.pageSize = size;
                },
                handleCurrentChange: function(currentPage){
//                    this.currentPage = currentPage;
                    Pagesearch(this,'${basePath}/merchant/user/getUserlistPage', this.parameters,currentPage,function (resData) {
                        if(resData.status == 'success'){
                            //this.tableData = resData.t;
                        }
                    });
                },
                /**
                 * 前往用户详情页面
                 * @param row
                 * @param event
                 * @param column
                 */
                goUserDetails:function(row, event, column){
                    if(column.label != '操作'&&column.label != '用户状态'){
//                        $(".main-right").empty();
//                        $(".main-right").load('${basePath}merchant/user/toUserDetial');
                        this.dialogDetailsFormVisible = true;
                        this.isShowingBox = true;
                        this.detailsForm.usercode = row.usercode;
                        this.detailsForm.nickname=row.nickname;
                        this.detailsForm.phone= row.phone;
                        this.detailsForm.corpName= row.corpName;
                        this.detailsForm.status= this.getStatus(row);
                        this.detailsForm.email= row.email;
                    }
                    if(column.label == '操作'|| column.label == '用户状态'){
                        return
                    }
                },
                userMouseEnterEvent:function(row, event, column){
                    if(event.label == '操作'){
                        column.style.cursor="default"
                    }
                    if(event.label != '操作'){
                        column.style.cursor="pointer"
                    }
                },
                searchFun:function(){
                    Pagesearch(this,'${basePath}/merchant/user/getUserlistPage', this.parameters,1,function (resData) {
                        if(resData.status == 'success'){

                            var totalPage = sessionStorage.getItem('totalPage');
                            fenYeProblem(totalPage);
                            sessionStorage.removeItem('totalPage');
                            //this.tableData = resData.t;
                            //console.log(resData)
                        }
                    });
                },
                addUser:function(){
                    this.isShowingBox = true;
                    this.dialogAddFormVisible = true;
                    this.addForm.selRole='';
                    this.addForm.add_user_role='';
                    this.addForm.add_nick_name='';
//						this.addForm.add_user_name='';
                    this.addForm.add_user_phone='';
                    this.addForm.add_user_emain='';
                },
                /**
                 * 重置密码 函数
                 * @param index
                 * @param row
                 */
                resetMima:function(index, row) {
                    var that = this;
                    var msg= confirm('确认要重置密码吗？');
                    if(msg){
                        var option3= {nickname:row.nickname,userid:row.userid};
                        sendService('${basePath}/system/user/updatePassword', option3, function (resData) {
                            if(resData.status == 'success'){
                                layer.msg('重置成功!', {icon: 6});
                            }else{
                                layer.msg(resData.msg, {icon: 5});
                            }
                        })
                    }
                },
                /**
                 * 格式化用户状态函数
                 * @param row
                 * @param column
                 * @returns {*}
                 */
                getStatus:function(row){
                    var status = row.status;
                    if(status == '01'){
                        return '未审核'
                    }else if(status == '02'){
                        return '正常'
                    }else if(status == '03'){
                        return '禁用'
                    }else {
                        return ''
                    }
                },
                handleChange:function(value) {
                    console.log(value);
                }
            },
            created: function () {
                //本模块为银行端商户管理员管理
                this.parameters.system='02';//商户端人员
                this.parameters.type='01';//超级管理员
                sendService("${basePath}bank/org/getUserSelectOrgTree", null, function (resData) {
                    if(null != resData.t){
                        user_manage.parameters.orgIds = getChildrenId(resData.t);

                        //获取所有商户
                        sendService('${basePath}bank/getAllMerchantList', {orgIds:user_manage.parameters.orgIds}, function (resData) {
                            if(resData.status == 'success'){

                                user_manage.merchantList = resData.t;
                                user_manage.merchantList.forEach(function (item) {
                                    user_manage.parameters.corpIds = user_manage.parameters.corpIds+item.corpId + ",";
                                });
                                Pagesearch(user_manage,'${basePath}/merchant/user/getUserlistPage', null,1,function (resData1) {
                                    if(resData1.status == 'success'){
                                        layer.close(loadRole);
                                        for(var i = 0;i<resData1.t.length;i++){
                                            if(resData1.t[i].status == '02'){
                                                resData1.t[i].status = true;
                                            }else if(resData1.t[i].status == '03'){
                                                resData1.t[i].status = false;
                                            }

                                        }
                                        var totalPage = sessionStorage.getItem('totalPage');
                                        fenYeProblem(totalPage);
                                        sessionStorage.removeItem('totalPage');
                                    }


                                });
                            }
                        });

                    }
                });
            },
            computed:{
                isOverflow:function () {
                    if(this.isShowingBox){
                        $(".main-right").css({'overflow':"hidden"});
                    }
                    if(!this.isShowingBox){

                        $(".main-right").css({'overflow':"auto"});
                    }

                }
            }
        });

    function getChildrenId(children){
        var str = "";
        if (children != null){
            children.forEach(function (item) {
                str = str + item.id + ",";
                var child = item.children;
                if(child != null){
                    str = str + getChildrenId(child) ;
                }
            });
        }
        return str;
    }
</script>
<style scoped>
    .switchInput{
        display: none;
    }
    /* 开关样式开始 */
    .switchBox{
        display: inline-block;
        line-height: 20px;
    }
    .switchBox .switchBtn{
        position: relative;
        display: inline-block;
        margin-top: 15px;
        cursor: pointer;
    }
    .switchWords{
        vertical-align: middle;
        display: inline-block;
        margin: 0 5px;
        margin-bottom: 15px;

    }
    .switchCircle{
        position: relative;
        display: inline-block;
        width: 40px;
        height: 20px;
        border-radius: 10px;
        background-color: #ff4444;
    }
    .switchCircleActive{
        position: relative;
        display: inline-block;
        width: 40px;
        height: 20px;
        border-radius: 10px;
        background-color: #13ce66;
    }
    .switchCircle .switchCircleInfo{
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        left: 1px;
        top: 1px;
    }

    .switchCircleInfoActive{
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background-color: #fff;
        position: absolute;
        right: 1px;
        top: 1px;
    }
    /* 开关样式结束 */





    .el-table__header,.el-table__body{
        width: 100% !important;
    }
    .el-table tr{
        height: 40px;
    }
    .addUsrtBtn{
        padding: 9px 15px;
        font-size: 12px;
    }
    /*table按钮样式调整开始*/
    .el-button--mini, .el-button--mini.is-round{
        padding: 4px 10px;
    }
    .userManageBox .editBtn{
        color: #409EFF;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .editBtn:hover{
        color: #fff;
        background-color: #409EFF;
        border-color: #409EFF;
    }

    .userManageBox .delBtn{
        color: #fa5555;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .delBtn:hover{
        color: #fff;
        background-color: #fa5555;
        border-color: #fa5555;
    }
    .userManageBox .resetBtn{
        color: #02dda7;
        background-color: transparent;
        border-color: transparent;
    }
    .userManageBox .resetBtn:hover{
        color: #fff;
        background-color: #02dda7;
        border-color: #02dda7;
    }
    .userManageBox .el-button{
        margin-left: 0;
    }
    /*table按钮样式调整结束*/
    .table_search, .table_btn{
        height: 60px;
        margin-bottom: 10px;
        background: #fff;
        padding: 10px 20px 30px;
    }
    /*.el-table td, .el-table th.is-leaf{*/
    /*border: none;*/
    /*}*/
    .el-table::before{
        height: 0;
    }
    .addUserBox{
        margin-bottom: 0;
        border-bottom: 1px solid #f2f4f8;
    }
    .el-input{
        width: auto;
    }
    .text-r{
        text-align: left;
    }
    .footerBox {
        width: 100%;
        height: 50px;
        background-color: #fff;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 9px;
        text-align: right;
    }

    .add-template-form > div{
        margin-left: 45px;
    }
    .el-dialog__header span{
        padding-left: 20px;
    }
    #menuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #eee;
        border: 1px solid #ccc;
    }
    .edit-template-form > div{
        margin-left: 45px;
    }
    /*.edit_dialog .el-form-item.is-required .el-form-item__label:before{*/
    /*content: '';*/
    /*}*/
    #addMenuContent{
        left: 0 !important;
        top: 40px !important;
        background-color: #eee;
        border: 1px solid #ccc;
    }


    .dialogDetails .topNav{
        margin-left: 30px;
        margin-bottom: 20px;
    }
    .dialogDetails .title-template{
        height: 60px;
        line-height: 60px;
        font-size: 18px;
        padding-left: 30px;
        margin-bottom: 10px;
        color: #333333;
        background: #ffffff;
    }

    .dialogDetails .info-template-content{
        background: #ffffff;
    }
    .dialogDetails .item-row{
        height: 46px;
        line-height: 46px;
        font-size: 16px;
        padding-left: 100px;
    }
    .dialogDetails .item-row div:first-of-type{
        color: #aaa;
        text-align: left
    }
    .dialogDetails .item-row div:last-of-type{
        color: #333;
        padding-left: 80px
    }

    .dialogDetails .info-template-content .el-row:nth-child(even){
        background-color: #F8F9FB;
    }
    .dialogDetails .info-template-content .el-row:last-of-type{
        margin-bottom: 30px;
    }
    .dialogDetails .el-dialog{
        overflow: hidden;
        -webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        -moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
        box-shadow: 0 0 16px rgba(0,0,0,0.5);
    }


    .el-dialog__header{
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        border-bottom: 1px solid rgba(255,68,68,1);
        width: 100%;
        position: absolute;
        left: 0px;
        top: 0px;
        background-color: #fff;
    }
    .el-dialog__headerbtn .el-dialog__close{
        color: #aaa;
        font-size: 22px;

    }
    .el-dialog__body{
        padding-top: 75px;
    }
    .dialogDetails .el-dialog__body{
        padding: 50px 0 0 0 ;
    }
    .errorBox{
        color: #fa5555;
        font-size: 12px;
        line-height: 1;
        padding-top: 4px;
        position: absolute;
        top: 100%;
        left: 0;
    }
    .errorBox2333{
        color: #fa5555;
        font-size: 12px;
    }
    /*#selManage label{*/
    /*position: relative;*/
    /*}*/
    #selManage label:before{
        content: '*';
        color: #fa5555;
        margin-right: 4px;

    }
    .add-manager{
        position: absolute;
        right:110px;
    }




    .el-dialog__header{
        z-index: 10;
    }
    .el-dialog{
        margin-top: 12vh !important;
    }
    .el-dialog__wrapper{
        overflow: hidden;
    }
    .el-dialog__header span{
        padding-left: 20px;
    }
    .el-dialog__wrapper .el-dialog__body{
        margin-top: 40px;
        height: 350px;
        overflow: auto;
    }
</style>
